/* BACKGROUND IMAGE OF WEBSITE */
body {
    background-color: rgb(255, 219, 231);
    overflow-x: hidden;
}

/* NAV BAR CONTAINERS CONTAINER */
#logoHeader {
    margin-top: 0px;
    width: 25%;
}


#contentHeader {
    margin-top: 0px;
    width: 85vw;
    margin-left: auto;
}

/* NAV BAR CONTAINER */
table {
    overflow-x: hidden;
    width: 100%;
    height: 12vw;
    top: 0;
    left: 0;
    right: 0;
    font-family: "Quicksand", "Garamond", serif;
    z-index: 10;
}

/* EACH OPTION IN THE NAV BAR TABLE */
th {
    font-family: "Quicksand", "Garamond", serif;
    font-size: larger;
    text-align: center;
}

/* HOME IMAGE ON NAV BAR */
#LogoHome {
    width: 12vw;
    height: 12vw;
}

/* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
.topBar {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);
    font-family: "Quicksand", "Garamond", serif;
    font-size: 2vw;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* CURRENT PAGE ON NAVBAR HIGHLIGHTED */
#currentpage {
    color: rgb(251, 95, 181);
}

/* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
.topBar:hover, #currentpage:hover {
    background-color: rgba(167, 167, 167, 0.8);
    color: rgb(254, 21, 161);
    font-size: 2.5rem;
}

/* HOME IMAGE ON NAV BAR */
#MobileLogoHome {
    width: 25vw;
    height: 25vw;
}

#HamButtonBlack {
    width: 20vw;
    height: 20vw;
}

.MobileLogo {
    margin-left: 37.5vw;
}

.HamButton {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
}

#MobileContentHeader {
    display: none;
    margin-top: 0px;
    position: fixed;
    width: 50vw;
    height: 100vh;
    top: 0;
    left: 50vw;
    z-index: 10;
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 20px black;
}

#HamButtonWhite {
    width: 15vw;
    height: 15vw;
    margin-left: 17.5vw;
}

.MobileBar {
    background-color: rgb(212, 185, 204);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);
    font-family: "Quicksand", "Garamond", serif;
    font-size: 2.5vw;
    width: 80%;
    height: 10%;
    margin-left: 5vw;
    margin-bottom: 5vw;
    cursor: pointer;
}

/* BORDER */
.border {
   border: solid; 
}

/* CONTACT POPUP */
#ContactPopUpContainer {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 11;
}

#ContactPopUp {
    display: block;
    position: fixed;
    width: 40vw;
    height: 25vw;
    top: 25%;
    left: 30vw;
    background-color: pink;
    border-radius: 20px;
    box-shadow: 0px 0px 20px black;
}

#ContactPopUpText {
    font-family: "Quicksand", "Garamond", serif;
    font-size: 3vw;
    text-align: center;
}

.ContactPopUpButtons {
    font-family: "Quicksand", "Garamond", serif;
    font-size: 2.5vw;
    width: 80%;
    height: 5vw;
    margin-left: 10%;
    text-align: center;
    border-radius: 20px;
    background-color: rgb(255, 224, 230);
}

.ContactPopUpButtons:hover {
    cursor: pointer;
    color: rgb(255, 82, 114);
    background-color: rgb(229, 201, 207);
}

/* ABOUT HEADERS AND TEXT */
#hearts {
    color: rgb(170, 58, 119);
    font-family: "Pinko", "Garamond", serif;
}

#harmony {
    color: rgb(170, 58, 119);
    font-family: "Pinko", "Garamond", serif;
}

/* SUPPORTING LINKS */
#SupportingLinksContainer {
    display: flex;
    flex-wrap: wrap;
}

#PageLinks, #SocialLinks, #Copyright {
    width: 30%;
    text-align: center;
    font-family: "Quicksand", "Garamond", serif;
    flex-grow: 1;
    flex-basis: 200;
}

#Copyright {
    margin-top: 4%;
}

.BottomPageLinks {
    font-family: "Quicksand", "Garamond", serif;
    cursor: pointer;
}

.BottomLinks:hover {
    color: rgb(254, 21, 161);
}

#BottomPageLogo {
    width: 20%;
}

/* GENERAL TEXT STYLING */
.TextHeader {
    font-family: "Beatbox", "Garamond", serif;
    font-size: 4vw;
    margin-left: 5vw;
}

.TextParagraph {
    font-family: "Quicksand", "Garamond", serif;
    font-size: 2vw;
    margin-left: 5vw;
}

/* ANIMATION REFERENCES */
.pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.grow:hover {
    animation-name: grow;
    animation-duration: 0.5s;
}

.shrink {
    animation-name: shrink;
    animation-duration: 0.5s;
}

.growcurrent:hover {
    animation-name: growcurrent;
    animation-duration: 0.5s;
}

.shrinkcurrent {
    animation-name: shrinkcurrent;
    animation-duration: 0.5s;
}

.slidein {
    animation-name: slidein;
    animation-duration: 0.5s;
}

.slideout {
    animation-name: slideout;
    animation-duration: 1s;
}

.contactanimation {
    animation-name: contactanimation;
    animation-duration: 0.5s;
}

/* ANIMATIONS */
@keyframes pulse {
    0% {scale: 1;}
    40% {scale: 1;}
    45% {scale: 1.05;}
    50% {scale: 1;}
    55% {scale: 1.05;}
    60% {scale: 1;}
    100% {scale: 1;}
}

@keyframes grow {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrink {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes growcurrent {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrinkcurrent {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes slidein {
    0% {left: 100vw;}
    100% {left: 50vw;}
}

@keyframes slideout {
    0% {left: 50vw;}
    50% {left: 100vw;}
    100% {left: 101vw;}
}

@keyframes contactanimation {
    0% {scale: 0;}
    50% {scale: 1.1;}
    100% {scale: 1;}
}

/* IMPORTED FONTS */
@font-face {
    font-family: Quicksand;
    src: url("Quicksand-Regular.ttf");
}

@font-face {
    font-family: Beatbox;
    src: url("BeatboxFreeRegular-LVGDE.ttf");
}

@font-face {
    font-family: Pinko;
    src: url("Pinko.ttf");
}

/*////////////////////////////////////////////////////////////
/////////////////////// MOBILE PORTING ///////////////////////
///////////////////////////////////////////////////////////*/


@media screen and (max-width: 1000px) {
    #ContactPopUp {
        width: 50vw;
        height: 30vw;
        left: 25vw;
    }

    /* SUPPORTING LINKS */
    #Copyright {
        width: 90%;
        margin-top: 4%;
    }
}

@media screen and (max-width: 750px) {
    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2vw;
    }

    #ContactPopUp {
        height: 32vw;
    }

    /* SUPPORTING LINKS */
    #Copyright {
        width: 90%;
        margin-top: 4%;
    }

    /* GENERAL TEXT STYLING */
    .TextHeader {
        font-family: "Beatbox", "Garamond", serif;
        font-size: 6vw;
        margin-left: 5vw;
        text-align: center;
    }

    .TextParagraph {
        font-family: "Quicksand", "Garamond", serif;
        font-size: 3vw;
        margin-left: 5vw;
        text-align: center;
    }

    /* ANIMATIONS */
    @keyframes grow {
        0% {background-color: rgb(213, 213, 213);
            color: rgb(0, 0, 0);}
        100% {background-color: rgba(167, 167, 167, 0.8);
            color: rgb(254, 21, 161);}
    }

    @keyframes shrink {
        0% {background-color: rgba(167, 167, 167, 0.8);
            color: rgb(254, 21, 161);}
        100% {background-color: rgb(213, 213, 213);
            color: rgb(0, 0, 0);}
    }
}

@media screen and (max-width: 550px) {
    #ContactPopUp {
        width: 70vw;
        height: 50vw;
        left: 15vw;
    }

    #ContactPopUpText {
        font-size: 4.5vw;
    }

    .ContactPopUpButtons {
        font-size: 3.5vw;
        height: 10vw;
    }
}

@media screen and (max-width: 400px) {
    /* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
    .topBar {
        background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        border-color: rgba(167, 167, 167, 0.8);
        font-family: "Quicksand", "Garamond", serif;
        font-size: 2.5vw;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5vw;
    }

    .MobileBar {
        font-size: 3.5vw;
    }

    #ContactPopUp {
        width: 80vw;
        height: 60vw;
        left: 10vw;
    }

    /* GENERAL TEXT STYLING */
    .TextHeader {
        font-family: "Beatbox", "Garamond", serif;
        font-size: 10vw;
        margin-left: 5vw;
        text-align: center;
    }

    .TextParagraph {
        font-family: "Quicksand", "Garamond", serif;
        font-size: 5vw;
        margin-left: 5vw;
        text-align: center;
    }
}

@media screen and (max-width: 300px) {
    /* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
    .topBar {
        background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        border-color: rgba(167, 167, 167, 0.8);
        font-family: "Quicksand", "Garamond", serif;
        font-size: 2vw;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2vw;
    }
}